<template>
  <div id="map" class="map"></div>
</template>
<script>
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";

export default {
  name: "MyMap",
  data() {
    return {};
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      var map = L.map("map").setView([51.505, -0.09], 13);

      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      L.marker([51.5, -0.09])
        .addTo(map)
        .bindPopup("A pretty CSS3 popup.<br> Easily customizable.")
        .openPopup();
    }
  }
};
</script>
<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>